<template>
    <div class="bg">
        <!-- 顶部 -->
        <div class="box">
            <div class="mbc">
                <!-- 顶部组件 -->
                <home-top></home-top>
                <div class="main flex">
                    <!-- 前侧 -->
                    <div class="first">
                        <eqipment-total></eqipment-total>
                        <eqipment-offline></eqipment-offline>
                    </div>
                    <!-- 中侧 -->
                    <div>
                        <water-and-ele></water-and-ele>
                        <div class="flex mgt580">
                            <ele-table></ele-table>
                            <water-table></water-table>
                        </div>
                    </div>
                    <!-- 右侧 -->
                    <div class="right">
                        <arrears-dormitory></arrears-dormitory>
                        <below-dormitory class="mgt20"></below-dormitory>
                        <excess-dormitory class="mgt20"></excess-dormitory>
                    </div>

                </div>
            </div>

        </div>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
const { proxy } = getCurrentInstance()
import homeTop from '@/components/homeTop.vue'
import eqipmentTotal from '@/components/eqipmentTotal.vue'
import eqipmentOffline from '@/components/eqipmentOffline.vue'
import waterAndEle from '@/components/waterAndEle.vue'
import eleTable from '@/components/eleTable.vue'
import waterTable from '@/components/waterTable.vue'
import arrearsDormitory from '@/components/arrearsDormitory.vue'
import belowDormitory from '@/components/belowDormitory.vue'
import excessDormitory from '@/components/excessDormitory.vue'

let box = ref(null)
onMounted(() => {
    box.value = document.querySelector('.box')
    console.log('box', box);
    box.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
})
let getScale = (w = 1920, h = 1080) => {
    const ww = window.innerWidth / w;
    const wh = window.innerHeight / h;
    return ww < wh ? ww : wh;
}
window.onresize = () => {
    box.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}



</script>

<style lang='less' scoped>
.bg {
    width: 100%;
    height: 100vh;
    background-color: #031026;
    overflow: hidden;
    box-sizing: border-box;

    .box {
        position: fixed;
        width: 1920px;
        height: 1080px;
        background-image: url('../assets/image/home/bg.png');
        background-size: 1920px 1080px;
        background-repeat: no-repeat;
        transform-origin: left top;
        top: 50%;
        left: 50%;
        overflow: hidden;

        .mbc {
            // background-color: rgba(8, 39, 84, 0.2);

        }

        .main {
            margin: 18px 36px 0px;

            .first {
                width: 492px;
            }

            .mgt580 {
                margin-top: 530px;
            }

            .right {
                margin: 0px 0px 0px 13px;
            }

            .mgt20 {
                margin-top: 15px;
            }


        }
    }
}
</style>